<template>
  <div class="index-map" style="height: calc(100vh - 64px)">
    <!-- <div class="indexLeft" style="margin-top:-40px;">
      <left-layout></left-layout>
    </div> -->

    <!-- <div class="indexRight" style="margin-top:-40px;">
      <right-layout-company v-if="showType === 'company'"></right-layout-company>
      <right-layout-station v-else></right-layout-station>
    </div> -->

    <div class="indexRight" style="margin-top:-55px;">
      <home-events-table>
      </home-events-table>  
    </div>

    <!-- <div class="charts-border indexNews">
      <scoll-news></scoll-news>
    </div> -->

    <Row type="flex" justify="start">
      <InMap class="mapHeight" @showInfo="showInfo"></InMap>
    </Row>
  </div>
</template>

<script>
import HomeEventsTable from './homeEventsTable'
// 左侧布局
//import LeftLayout from "./leftLayout";
// 右侧布局tab
//import RightLayoutCompany from "./rightLayoutCompany";
//import RightLayoutStation from "./rightLayoutStation";
// 滚动新闻
//import ScollNews from "./centerLayout/scollNews";
// 背景地图
import { InMap } from "@/components/charts/map";

export default {
  name: "home",
  components: {
    HomeEventsTable,
    //LeftLayout,
    //RightLayoutCompany,
    //RightLayoutStation,
    //ScollNews,
    InMap
  },
  data() {
    return {
      contentHeight: "",
      showType: "company"
    };
  },
  methods: {
    showInfo(name) {
      if (name === "陕西"){
        this.showType = "company"
      } else {
        this.showType = "station"
      }
    }
  }
};
</script>

<style lang="less">
.indexChartsSize {
  width: 23vw;
  height: 27vh;
  z-index: 2;
}
.indexLeft {
  .indexChartsSize;
  position: absolute;
  top: 10%;
  left: 1%;
}
.indexRight {
  .indexChartsSize;
  position: absolute;
  top: 20%;
  right: 13%;
}
.indexNews {
  position: absolute;
  bottom: 4%;
  left: 25%;
  right: 25%;
  z-index: 1000;
}
.mapHeight {
  height: 100%;
  width: 100%;
}
</style>
